<template>
	<div class="tab">
		<ul class="tab-btn" @click="tabActive($event)">
			<li class="tab-item" v-for="(item, index) in getBaseMsg.tips" :index="index" :class="{'tab-active':index === nowActive}">{{item}}</li>
			<li class="tab-bar" :style="barNowType"></li>
		</ul>
		<div class="tab-container">
			<Highlights class="higtlights"></Highlights>
			<Schedule></Schedule>
			<CostInstruction></CostInstruction>
			<BookNotice></BookNotice>
		</div>	
	</div>
</template>

<script>
	import Highlights from '../highlights'
	import Schedule from '../schedule'
	import CostInstruction from '../costinstruction'
	import BookNotice from '../booknotice'

	import {mapGetters} from 'vuex'

	export default{
		name: 'tab',
		components: {
			Highlights,
			Schedule,
			CostInstruction,
			BookNotice
		},
		data() {
			return {
				nowActive: 0,
				barNowType: {
          width:'',
          left : ''
      	},
      	scrollTop: 0,
      	tabsHeight: 46
			}
		},
		computed: {
	  	...mapGetters([
	      'getBaseMsg'
	    ])
  	},
		mounted() {
			this.dealTabs();
		},
		methods: {
			// iOS6+使用position:sticky，其他情况下通过js来控制实现粘性布局。
			//检测iOS设备Safari的版本是否大于等于6
			getSafariVersion: function() {
		    let UA = window.navigator.userAgent,
		        isIOS = UA.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/),//["iPhone OS 9_1", "iPhone", "9_1"]
		        version = "";
		    if (isIOS && isIOS[2]) {
		        version = parseInt(isIOS[2].replace(/_/g, '.'), 10);
		        return version >= 6;
		    }
			},
			// 获取元素到页面顶部的距离
			getOffsetTop: function(e) {
				let top = e.offsetTop,
						parent = e.offsetParent;
				while (parent !== null) {
	        top += parent.offsetTop;
	        parent = parent.offsetParent;
	   		}
	    	return top;
			},
			dealTabs: function () {
		    let doc = document,
		        highlights = doc.querySelector('.higtlights'),
		        highlightTop = this.getOffsetTop(highlights),
		        tabs = doc.querySelector('.tab-btn');
		    this.tabsHeight = tabs.offsetHeight;
		    if (this.getSafariVersion()) {
		        tabs.classList.add('sticky');
		    }else {
	        window.addEventListener('scroll', function() {
            this.scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;//可视窗口顶部到页面顶部的距离，即滚动顶部的距离
            if (scrollTop >= (highlightTop - this.tabsHeight)) {
                tabs.classList.add('fixed');
                highlights.classList.add('prevent-coverage');
            }else {
                tabs.classList.remove('fixed');
                highlights.classList.remove('prevent-coverage');
            }
	        }); 
		    }
			},
			tabActive: function(e) {
				const eTart = e.target;
				// 点击tab组件改变其样式
				if (~eTart.className.search('tab-item')) {
          const tartWidth = window.getComputedStyle(eTart).width,
              	eActive = document.querySelectorAll('.tab-active'),
              	tartIndex = e.target.getAttribute('index'),
              	containerTarget = document.querySelector('.tab-container').children[tartIndex]; 
          if(eActive) {
          	eActive.forEach(activeItem => {
          		activeItem.classList.remove('tab-active');
          	})
          }
          e.target.classList.add('tab-active');
          this.barNowType = {
              width : tartWidth,
              left : tartIndex * parseInt(tartWidth)+ 'px'
          };
         	// 让元素出现在可视窗口
         	containerTarget.scrollIntoView();
      	}
			},
			// isVisible: function() {	
			// 	console.log(1)
			// 	let tabContainer = document.querySelectorAll('.tab-container-item');
			// 	tabContainer.forEach((node, index) => {
			// 			let offsetTop = this.getOffsetTop(node),
			// 				windowHeight = document.body.clientWidth,
			// 				nodeHeight = node.offsetHeight;
			// 			if (windowHeight + this.scrollTop > offsetTop) {
			// 		　	//元素即将出现
			// 				this.tabActive();
			// 			}			
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	$paddingVertical: 1rem;
	$paddingHorizontal: 1.63rem;
	$tabFont: 1.36rem;
	/*fixed定位后，第一个展示区域会被覆盖掉*/
	.prevent-coverage{
	  margin-top: calc($paddingHorizontal*2 + $tabFont);
	}
	.tab-btn{
		background: #FFF;
		border-top: 1px solid #D7D7D7;
		border-bottom: 1px solid #eee;
		padding: $paddingVertical 0;
		display: flex;
		display: -webkit-flex;
    display: -webkit-box;
		-webkit-box-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    z-index: 100;
		li{
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			text-align: center;
			font-family: ".PingFang-SC-Regular";
			font-size: $tabFont;
			color: #333;
			letter-spacing: 0;
		}
		.tab-active{
			color: #FF6633;
		}
		.tab-bar {
	    position: absolute;
	    height:2px;
	    left:0;
	    bottom: 0;
	    width:25%;
	    transition: left .3s;
	    background: #FF6633;
		}
	}
	
</style>
